<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <base href="<%=basePath%>"/>
    <title>后台管理员功能页面</title>
    <link rel="stylesheet" type="text/css" href="styles/simditor.css"/>

    <script type="text/javascript" src="scripts/jquery.min.js"></script>
    <script type="text/javascript" src="scripts/module.min.js"></script>
    <script type="text/javascript" src="scripts/hotkeys.min.js"></script>
    <script type="text/javascript" src="scripts/uploader.min.js"></script>
    <script type="text/javascript" src="scripts/simditor.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //初始化文本编辑器
            var editor = new Simditor({
                //textarea的id
                textarea: $('#editor'),
                placeholder: '请输入内容Balabala...',
                pasteImage: true,
                defaultImage: 'images/image.png',
                //工具条都包含哪些内容
                toolbar: ['title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale', 'color', 'ol', 'ul', 'blockquote', 'code', 'table', 'link', 'image', 'hr', 'indent', 'outdent', 'alignment'],
                //若需要上传功能，上传的参数设置。
                upload: {
                    url: 'manage/product/rich_text_upload.do', //文件上传的接口地址
                    params: null, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交
                    fileKey: 'file', //服务器端获取文件数据的参数名
                    connectionCount: 3,
                    leaveConfirm: '正在上传文件'
                }
            });
        });
    </script>
    <script type="text/javascript">
        function up() {
            document.getElementById("pic_form").submit();
        }
    </script>
</head>
<body>
<h1>后台管理员功能实现</h1>
<hr/>
<h3>管理员登录</h3>
<form method="post" action="admin/user/login.do" name="admin_login_form">
    <label for="username">管理员姓名:</label><input type="text" placeholder="请输入管理员名" id="username" name="username"/><br/>
    <label for="password">管理员密码:</label><input type="password" placeholder="请输入管理员密码" id="password"
                                               name="password"/><br/>
    <input type="submit" value="登录"/>
</form>
<c:if test="${currentUser.role==1}">
    <h4>管理员${currentUser.username},你好!</h4>
</c:if>
<h3>管理员添加商品或更新商品信息</h3>
<form method="post" action="manage/product/update_get_detail.do">
    <label for="productId">请输入要查看的</label><input id="productId" name="productId" type="text"/>
    <input type="submit"/>
</form>
<form method="post" action="manage/product/save.do" name="admin_save_form">
    <label for="id">商品&emsp;&emsp;ID:</label><input type="text" placeholder="请输入商品品类ID" value="${product.id}" id="id"
                                                    name="id"/><br/>
    <label for="categoryId">商品品类ID:</label><input type="text" placeholder="请输入商品品类ID" value="${product.categoryId}"
                                                  id="categoryId" name="categoryId"/><br/>
    <label for="name">商品名称&emsp;:</label><input type="text" placeholder="请输入商品名称" id="name" value="${product.name}"
                                                name="name"/><br/>
    <label for="subImages">商品图片&emsp;:</label><input type="text" placeholder="请输入商品图片地址" id="subImages"
                                                     value="${product.subImages}" name="subImages"/><br/>
    <label for="subtitle">商品子标题:</label><input type="text" placeholder="请输入商品子标题" id="subtitle"
                                               value="${product.subtitle}" name="subtitle"/><br/>
    <label for="price">商品价格&emsp;:</label><input type="text" placeholder="请输入商品价格" id="price" value="${product.price}"
                                                 name="price"/><br/>
    <label for="stock">商品库存&emsp;:</label><input type="text" placeholder="请输入商品库存" id="stock" value="${product.stock}"
                                                 name="stock"/><br/>
    <label for="status">销售状态&emsp;:</label><input type="text" placeholder="请输入(1在售,2下架,3删除)"
                                                  id="status" ${product.status} name="status"/><br/>
    <%--todo 商品详情富文本--%>
    <h3><label for="editor">商品详情:</label></h3>
    <textarea id="editor" name="detail">${product.detail}</textarea>
    <input type="submit"/>
    <input type="reset" value="清空"/><br/>
</form>
<%--todo 商品图片上传--%>
<form action="manage/product/upload2.do" enctype="multipart/form-data" method="post" name="pic_form" id="pic_form">
    <input type="file" id="file" name="file" onchange="(function() {
          var result = document.getElementById('previewImg');
          if (typeof FileReader === 'undefined')result.innerHTML = '抱歉,您的浏览器不支持FileReader';
          var simpleFile = document.getElementById('file').files[0];
          if(!/image\/\w+/.test(simpleFile.type)){
              alert('请确保文件类型为图像类型');
              return false;
          }
          var reader = new FileReader();
          reader.readAsDataURL(simpleFile);
          reader.onload = function(e) {
            console.log(this.result);
            result.src = this.result;
          }
        })()"/><br/>
    <img id="previewImg" name="previewImg" style="width: 100px;border: 1px blue groove;"/>
    <input type="button" value="上传" onclick="up()"/>
</form>
</body>
</html>
